<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
  .box {
    width: 200px;
    height: 200px;
  }

  .circle-load-svg {
    stroke-dasharray: 0 570;
    animation: rot 5s linear infinite;
  }

  @keyframes rot {
    100% {
      stroke-dasharray: 570 570;
    }
  }
</style>

<body>
  <div class="box">
    <svg width="220px" height="220px" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle cx="110" cy="110" r="90" stroke-width="10" stroke="gainsboro" fill="none"></circle>
      <circle cx="110" cy="110" r="90" stroke-width="10" stroke="darkturquoise" fill="none" class="circle-load-svg" stroke-linecap='round'></circle>
    </svg>
  </div>

</body>

</html>